<template>
    <!-- 查询条件 -->
    <el-card>
        <el-form :model="condition" label-width="100px" :inline="true" size="normal">
            <el-form-item align="left">

                <el-button type="default" size="default" v-for="item in buttonList" :key="item.PId"
                    @click="dynamicButtonClick(item.PId)">{{
            item.PName
        }}</el-button>

            </el-form-item>
            <el-form-item label="字典标识：" align="right">
                <el-input v-model="condition.identification"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>

            </el-form-item>

        </el-form>
        <!-- 弹出层-字典添加 -->
        <el-dialog title="字典添加" v-model="dicAddVisible" width="60%" style="width:550px;margin:0 auto">
            <el-form :model="dicForm" label-width="100px" :inline="false" size="normal">
                <el-form-item label="字典标识：">
                    <el-input v-model="dicForm.Identification"></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-input v-model="dicForm.Value"></el-input>
                </el-form-item>
                <el-form-item label="标记：">
                    <el-input v-model="dicForm.Sign"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="dicAdd">添加</el-button>
                    <el-button @click="dicAddVisible = false">取消</el-button>
                </el-form-item>
            </el-form>


        </el-dialog>
        <!-- 弹出层-字典修改 -->
        <el-dialog title="字典修改" v-model="dicUpdVisible" width="70%">
            <el-form :model="dicForm" label-width="100px" :inline="false" size="normal">
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0"><el-form-item label="字典标识：">
                            <el-input v-model="dicForm.Identification"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="8" :offset="0"><el-form-item label="值：">
                            <el-input v-model="dicForm.Value"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="8" :offset="0"><el-form-item label="标记：">
                            <el-input v-model="dicForm.Sign"></el-input>
                        </el-form-item></el-col>
                </el-row>





                <div style="text-align: center;"><el-button type="success" @click="dicUpd">修改</el-button>
                    <el-button @click="dicUpdVisible = false">取消</el-button>
                </div>

            </el-form>


        </el-dialog>
        <!-- 导入 -->
        <el-dialog title="导入" v-model="inputVisable" width="30%" @close="inputVisable = false">
            <p>
                <span>下载模板</span><el-link type="primary" :href="captcha + '/TempFiles/temp.xlsm'">点击下载</el-link>
            </p>
            <el-upload class="upload-demo" drag :action="baseURL + 'Dic/BatchImportDics'">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                </div>
                <div>
                    <el-button type="primary" size="default" @click="inputVisable = false; getDicList()"
                        style="float:right">关闭</el-button>

                </div>
            </el-upload>
        </el-dialog>
    </el-card>
    <!-- 列表显示 -->
    <el-card>

        <el-table :data="dicList.value" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column label="唯一标识" prop="Id" align="center">
            </el-table-column>
            <el-table-column label="字典标识" prop="Identification" align="center">
            </el-table-column>
            <el-table-column label="字典值" prop="Value" align="center">
            </el-table-column>
            <el-table-column label="标记" prop="Sign" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">

                    <el-link type="warning" @click="dicUpdClick(scope.row.Id)">修改</el-link>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 分页 -->
    <el-card>
        <!-- 分页 -->
        <table style="margin: 5px auto;">
            <tbody>
                <tr>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="total, slot,sizes" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <span class="el-pagination__total is-first">&nbsp;共计{{ pager.pageCount }}页,当前{{
            pager.pageIndex
        }}/{{ pager.pageCount }}页</span>
                        </el-pagination>
                    </td>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="slot, prev, pager" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <button @click="handleCurrentChange(1)" :disabled="pager.pageIndex == 1"
                                class="btn-prev">首页</button>
                        </el-pagination></td>
                    <td><el-pagination v-model:current-page="pager.pageIndex" v-model:page-size="pager.pageSize"
                            :page-sizes="[1, 2, 3, 10]" layout="slot, next, jumper" :total="pager.totalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <button @click="handleCurrentChange(pager.pageCount)"
                                :disabled="pager.pageIndex == pager.pageCount" class="next-prev">尾页</button>
                        </el-pagination></td>
                </tr>
            </tbody>
        </table>
    </el-card>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';


import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { loginStore } from "@/stores/login"

import { baseURL_dev } from '@/config/baseURL'
import { baseURL_captcha } from '@/config/baseURL'
const baseURL = baseURL_dev
const captcha = baseURL_captcha
axios.defaults.baseURL = baseURL
//字典列表

const Route = useRoute();
const store = loginStore();

const dicList = reactive({
    Id: 0,
    Identification: "",
    value: "",
    Sign: "",
})
const pager = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    pageCount: 0,
})
const condition = reactive({
    identification: "",
})
function handleSizeChange(size) {
    pager.pageSize = size;
    getDicList();
}
function handleCurrentChange(index) {
    pager.pageIndex = index;
    getDicList();
}
function getDicList() {
    axios.get("Dic/PagingDicsList", {
        params: {
            identification: condition.identification,
            pageIndex: pager.pageIndex,
            pageSize: pager.pageSize,
        }
    }).then(res => {
        dicList.value = res.data.Data;
        pager.totalCount = res.data.TotalCount;
        pager.pageCount = res.data.PageCount;
    })
}
const buttonList = ref([])
//根据路径获取按钮权限
function getButtonPermissionsByPath() {
    let empId = store.getUserInfo().IsTenant ? store.getUserInfo().TenantId + 'admin' : store.getUserInfo().UId;
    axios.get("Permission/GetButtonPermissionsByPath", {
        params: {
            empId: empId,
            path: Route.fullPath
        }
    }).then(res => {
        buttonList.value = res.data.Data;
    })
}
const dicAddVisible = ref(false)
//字典实体
const dicForm = reactive({
    Id: 0,
    Identification: "",
    Value: "",
    Sign: ""
})
//字典添加
function dicAdd() {
    axios.post("Dic/DicAdd", dicForm).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success(res.data.Msg)
            getDicList();
            dicAddVisible.value = false;
        }
        else {
            ElMessage.error('添加失败')
        }
    })
}
const multipleSelection = ref([])
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}
//字典批量删除
function dicsBatchDel() {
    if (multipleSelection.value.length == 0) {
        ElMessage.error("至少选中一项");
        return;
    }
    ElMessageBox.confirm("确定要删除吗？", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "danger",
    }).then(() => {
        axios.post("Dic/BatchDicsDel", multipleSelection.value
        ).then(res => {
            if (res.data.Code == 200) {
                ElMessage.success("删除成功");
                handleCurrentChange(1)
            }
            else {
                ElMessage.error(res.data.Msg);
            }
        })
    }).catch(() => { })
}

const dicUpdVisible = ref(false)
//获取要修改的实体
function getDicById(id: number) {
    axios.get("Dic/GetDicById?id=" + id).then(res => {
        console.log(res.data.Data);
        dicForm.Id = res.data.Data.Id;
        dicForm.Identification = res.data.Data.Identification;
        dicForm.Value = res.data.Data.Value;
        dicForm.Sign = res.data.Data.Sign;
    })
}
//字典修改
function dicUpd() {
    axios.post("Dic/DicUpd").then(res => {
        if (res.data.Code == 200) {
            ElMessage.success(res.data.Msg);
            getDicList();
            dicUpdVisible.value = false;
        }
    })
}
function dicUpdClick(id: number) {
    dicUpdVisible.value = true;
    console.log(id);
    getDicById(id);
}
const inputVisable = ref(false)

//字典修改
//数据导入
function dynamicButtonClick(pid: string) {
    switch (pid) {
        //增
        case "M17001001": dicAddVisible.value = true; break;
        //批删
        case "M17001002": dicsBatchDel(); break;

        //导入
        case "M17001003": inputVisable.value = true;; break;
    }
}
onMounted(() => {
    getDicList();
    getButtonPermissionsByPath();
})
</script>

<style scoped>
.el-link {
    margin-right: 10px;
}
</style>